<template>
   <!-- 17、所有页面添加骨架屏效果 -->
   <van-skeleton title avatar :row="3" :loading="loading">
  <div>
    <!-- 9、商品详情页实现 -->
    <van-nav-bar title="详情页" left-arrow @click-left="() => $router.back()" />
    <img
      class="img"
      src="https://tse4-mm.cn.bing.net/th/id/OIP-C.N0USLldg_iKDGVKT12vB4AHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
      alt=""
    />
    <p class="price">到手价￥<b>626.40</b></p>
    <van-text-ellipsis
      rows="2"
      :content="text"
      expand-text="展开"
      collapse-text="收起"
    />
    <p class="fen">
      <span>分享</span>
      <span>收藏</span>
      <span>降价通知</span>
    </p>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <!-- 11、点击购物车图标跳转购物车页面，还原购物车页面 -->
      <van-action-bar-icon icon="cart-o" @click="() => $router.push('/cart')" text="购物车" badge="5" />
      <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
      <van-action-bar-button
        type="warning"
        @click="addCart()"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</van-skeleton>
  
</template>
<script setup>
import { showToast } from "vant";
import shake from "@/utils";
import { ref,onMounted } from "vue";

const text =
  "MT HELMETS西班牙法律规范苏格兰和如工号牌恶如我会发高律规范苏格兰和如工号牌恶如我会发高热热陪我一天返回怕热你我";
// 14、自定义防抖函数，添加购物车操作和操作商品数量做防抖处理
  const addCart = shake(() => {
  showToast("加入购物车");
},800);
const loading = ref(true);
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 800);
});
</script>
<style scoped lang='scss'>
.img {
  width: 100%;
}
.price {
  color: red;
  margin-left: 20px;
  b {
    font-size: 30px;
  }
}
.van-text-ellipsis {
  margin: 0px 20px;
  font-weight: bold;
}
.fen {
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: #7c7a7a;
}
</style>